<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Tab Demos</title>
	
	<link  href="../jquery.ui.tabs.css" rel="stylesheet" type="text/css"  class="view-source"/>
	<link  href="../../../../themes/default/style.css" rel="stylesheet" class="view-source">
	<script src="../../../../scripts/jquery.js" type="text/javascript" class="view-source"></script>
	<script src="../../../../scripts/common.js" type="text/javascript" class="view-source"></script>
	<script src="../../../../scripts/browserfix.js" type="text/javascript"  class="view-source"></script>
	<script src="../../../../scripts/plugins/jquery.json.js" type="text/javascript" class="view-source"></script>
	
	<script src="../../../../scripts/plugins/jquery.ui.js" type="text/javascript" ></script>
		
	<script src="../jquery.ui.tabs.js" type="text/javascript" class="view-source"></script>
	
	<script src="../../demo.js"></script>
	<link href="../../demo.css" rel="stylesheet">
	
<script  class="view-source noparse">	
$( function(){
	var $tabs = $('#tabs-api').tabs({
		closable:true,
		tabs:[
			{label:'tab1',content:'apitabs-1'},
			{label:'tab2',content:'apitabs-2'}
		],
		add: function(event, ui) {
			//callback
		},
		tabClosing:function(event,ui){
			alert('tab closing......') ;
			return true ;
		},
		tabClosed:function(){
			alert('tab closed') ;
			return true ;
		},
		height:'100px'
	});

	//添加tab也控制区域
	var $tab_title_input = $('#tab-title-api'), $tab_content_input = $('#tab-content-api');
	var tab_counter = 3 ;
	
	$('#add-api').click( function(){
		var tab_title = $tab_title_input.val() || 'Tab '+tab_counter;
		var tab_content = $tab_content_input.val() || 'Tab '+tab_counter+' content.';
		$('#tabs-api').tabs().add({
			label:tab_title,
			panel:tab_content
		});
	} ) ;
} );
</script>
</head>

<body>

		<div id='content-api' class='demo'>
			<h1></h1>
			tab标题：<input type='text' id='tab-title-api'> 
			tab内容：<input type='text' id='tab-content-api'> &nbsp;&nbsp;&nbsp;  <a href="javascript:void(0)" class="btn" id='add-api'>创建tab</a>
			<br /><br />
			tab序号：<input type='text' style='width:50px' id='tab-index'> &nbsp; &nbsp;
			<a href="javascript:"  class="btn view-source noparse" onclick="$('#tabs-api').tabs().remove({'index':$('#tab-index').val()})">删除tab</a> &nbsp; &nbsp;
			<a href="javascript:" class="btn view-source noparse" onclick="$('#tabs-api').tabs().disable({'index':$('#tab-index').val()})">失效tab</a> &nbsp; &nbsp;
			<a href="javascript:" class="btn view-source noparse" onclick="$('#tabs-api').tabs().enable({'index':$('#tab-index').val()})">有效tab</a> &nbsp; &nbsp;
			<a href="javascript:" class="btn view-source noparse" onclick="$('#tabs-api').tabs().hide({'index':$('#tab-index').val()})">隐藏tab(不能隐藏当前选中Tab)</a> &nbsp; &nbsp;
			<a href="javascript:" class="btn view-source noparse" onclick="$('#tabs-api').tabs().show({'index':$('#tab-index').val()})">显示tab</a> &nbsp; &nbsp;
			<a href="javascript:" class="btn view-source noparse" onclick="$('#tabs-api').tabs().active({'index' : $('#tab-index').val()})">选择tab</a> &nbsp; &nbsp;
			<br/><br/>
			<div id="tabs-api" class="view-source">
				<div id="apitabs-1">
					<p>tab1 content ..............................</p>
				</div>
				<div id="apitabs-2">
					<p>tab2 content ..............................</p>
				</div>
			</div>
		</div>
</body>
</html>